var page = 1;

document.querySelector("#btn").addEventListener('click', function() {
	
	if(page <= 2) {
		page++;
		document.querySelector(".box").innerHTML = "";
		loadXMLDoc();

	} else {
		page = 1
		document.querySelector(".box").innerHTML = "";
		loadXMLDoc();
	}

})

function loadXMLDoc() {
	var xmlhttp;
	if(window.XMLHttpRequest) {
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp = new XMLHttpRequest();
	} else {
		// IE6, IE5 浏览器执行代码
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			//			document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
			var json = xmlhttp.responseText;
			json = JSON.parse(json);

			for(var i = 0; i < json.sites.length; i++) {
				console.log(json.sites[i])
				var div = document.createElement('li');
				var img = document.createElement('img');
				img.src = json.sites[i].img;
				var h4 = document.createElement('h4');
				h4.innerHTML = json.sites[i].h4;
				var p = document.createElement('p');
				p.innerHTML = json.sites[i].title;
				var div_1 = document.createElement('div')
				var div_2 = document.createElement('div')
				var div_3 = document.createElement('div')
				var div_4 = document.createElement('div')
				var div_5 = document.createElement('div')
				var div_6 = document.createElement('div')
				var span_1 = document.createElement('span')
				var ul = document.createElement('ul')
				span_1.innerHTML = json.sites[i].percentage
				var span_2 = document.createElement('span')
				span_2.innerHTML = json.sites[i].letter
				var span_3 = document.createElement('span')
				span_3.innerHTML = json.sites[i].yun
				var span_4 = document.createElement('span')
				span_4.innerHTML = json.sites[i].cur
				var span_5 = document.createElement('span')
				span_5.innerHTML = json.sites[i].price

				//给div添加class名
				div_1.classList.add("info")
				div_2.classList.add("progress")
				div_3.classList.add("progress-bar")
				div_4.classList.add("desc")
				div_5.classList.add("extra")
				div_6.classList.add("box")
				span_1.classList.add("percentage")
				span_2.classList.add("letter")
				span_3.classList.add("yan")
				span_4.classList.add("cur")
				span_5.classList.add("price")
				p.classList.add("title")
				ul.classList.add("ul")

				var li = document.createElement('li')
				li.appendChild(img)
				//				console.log(li)
				li.appendChild(div_1)
				div_1.appendChild(h4)
				div_1.appendChild(p)
				div_1.appendChild(div_2)
				div_2.appendChild(div_3)
				div_1.appendChild(div_4)
				div_4.appendChild(span_1)
				div_4.appendChild(span_2)
				div_1.appendChild(div_5)
				div_5.appendChild(span_3)
				div_5.appendChild(span_4)
				div_5.appendChild(span_5)
				ul.appendChild(li)
				var box = document.querySelector(".box")
				box.appendChild(ul)
				console.log(box)

			}

		}
	}
	xmlhttp.open("GET", page + ".json", true);
	xmlhttp.send();
}

loadXMLDoc()